<template>
    <div  class="not-found">
        <h2 class="title" data-id="1">这是测试的文本!!</h2>
        <van-field  label="账号"></van-field>
    </div>
</template>

<script setup lang="ts">
    import CurrView from "./index.vue";
    console.log(CurrView);
    
</script>
<!-- 
    为什么在style中加了scoped属性, 当前组件的style样式仅对当前页面生效??
    1. 每一个组件都有一个唯一的id(__hmrId), vue脚手架在解析vue组件时,会先查找style中是否绑定scoped属性, 如果绑定就给template中的每一个元素/组件添加自定义属性  data-v- __hmrId    (!!!如果是组件,只会给组件的根元素添加)

    2. 脚手架在解析组件内style中的样式时, 会给每一个选择器结尾添加属性选择器 [data-v- __hmrId]  => 

    /* 
    .title{  // 不加scoped  => 当前样式全局的
        color:red;
    }

    .title[data-v-8f33f6cb]{ // 加scoped  => 包含了data-v-8f33f6cb属性的.title   (只有当前页面有)
        color:blue;
    } 
    */

    如何修改组件内 某个元素的样式? (针对组件内有其他子元素的情况)
    
    深度选择器!!!
    css2 
    >>>    => css
    ::deep  => scss
    /deep/  => less

    css3
    ::deep(xxx)

 -->
 <!-- css语法 -->
<style scoped>
    .title{
        color:red;
    }

    /*  */
    /* >>> #van-field-1-label{
        color:blue;
    } */

    :deep(#van-field-1-label){
        color:blue;
    }
</style>


<!-- <style lang="scss" scoped>
    .title{
        color:red;
    }

    // vue2-sass   ::deep   不ok
    // ::deep #van-field-1-label{
    //     color:blue;
    // }

    // vue3    :deep    ok
    // :deep(#van-field-1-label){
    //     color:blue;
    // }
</style> -->


<!-- <style lang="less" scoped>
    .title{
        color:red;
    }

    // vue3    :deep    ok
    // :deep(#van-field-1-label){
    //      color:blue;
    //  }

    // vue2-less
    /deep/  #van-field-1-label{
        color:blue;
    }
</style> -->